<template>
  <div class="table-list">
    <el-row>
      <SectionTitle :is-show="!(showMobilePage && isIssueInvoiceModule)" :total="list.total" title="关联订单" style="margin: 24px 0;">
        <div v-if="!showMobilePage && (totalAmount || totalAmount == 0)" class="total-amount-price">
          <dataDisplay :data-list="[{ label: '总含税金额', data:totalAmount, icon: incomeAmountIcon, width: '200px' }]" />
        </div>
      </SectionTitle>
      <dataDisplay v-if="showMobilePage" :data-list="[{ label: '总含税金额', data:totalAmount, icon: incomeAmountIcon }]" style="margin-bottom: 10px;" />
      <el-table
        v-if="list.items.length > 0"
        :data="list.items"
        class="table-fixed"
        style="margin-left: 4px"
        header-cell-class-name="dynamic-edit-table-cell"
        element-loading-text="加载中..."
        empty-text="暂无数据"
        border
        fit>
        <el-table-column
          :index="indexMethod"
          label="序号"
          type="index"
          width="50" />
        <el-table-column align="left" label="订单类型" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.orderType | mapOptions(orderType) }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="订单编号" min-width="120">
          <template slot-scope="scope">
            <ToolTip v-if="scope.row.orderNum" :content="scope.row.orderNum">
              <router-link
                v-if="scope.row.relatedId && scope.row.orderType"
                :to="{name: setRouterName(scope.row.orderType), params: setRouterParams(scope.row)}"
                target="_blank"
                class="overflow ellipsis"
                style="color:#406EFF; width: 100%"
              >{{ scope.row.orderNum }}</router-link>
              <div v-else class="ellipsis">
                {{ scope.row.orderNum }}
              </div>
            </ToolTip>
            <div v-else style="color:#406EFF; cursor: pointer" @click="goOrderDetail(scope.row)">--</div>
          </template>
        </el-table-column>
        <el-table-column align="right" label="含税金额（元）" min-width="140">
          <template slot-scope="scope">
            {{ scope.row.contractPrice | moneyFilter(true, '', true, 0) }}
          </template>
        </el-table-column>
        <el-table-column align="right" label="刊例价（元）" min-width="130">
          <template slot-scope="scope">
            {{ scope.row.publishPrice | moneyFilter(true, '', true) }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="执行账号" min-width="120">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.exeAccount"/>
          </template>
        </el-table-column>
        <el-table-column align="left" label="执行主题（项目）" min-width="140">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.exeTheme"/>
          </template>
        </el-table-column>
        <el-table-column align="left" label="下单平台" min-width="120">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.orderPlatformName"/>
          </template>
        </el-table-column>
        <el-table-column v-if="!isIssueInvoiceModule" align="left" label="执行类型" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.exeType | mapOptions(exeType) }}
          </template>
        </el-table-column>
        <el-table-column v-if="!isIssueInvoiceModule" align="left" label="内容来源" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.contentSource | mapOptions(contentSource) }}
          </template>
        </el-table-column>
      </el-table>
      <empty-placeholder v-else style="margin-bottom: 24px" />
    </el-row>
    <el-row :justify="showMobilePage ? 'start':'end'" type="flex" class="pagination-area">
      <el-pagination
        v-show="list.total > 10"
        :current-page="list.page"
        :page-size="list.perPage"
        :total="list.total"
        :small="showMobilePage"
        :page-sizes="[10, 50, 100, 250, 500]"
        :layout="showMobilePage ? 'prev, pager, next' : 'total, prev, pager, next, sizes, jumper'"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-row>
  </div>
</template>

<script>
import { orderType, contentSource, exeType } from '../../module/options';
import SectionTitle from '@/components/Title';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import incomeAmountIcon from '@/assets/chargeOffDetail/incomeAmount.png';
import { mapOptions } from '@/filters';
import { moneyFilter } from '@/filters/number';
import dataDisplay from '@/components/Common/baseComponent/dataDisplay';

export default {
  name: 'RelatedOrderList',
  filters: {
    mapOptions,
    moneyFilter
  },
  components: {
    SectionTitle,
    EmptyPlaceholder, dataDisplay
  },
  props: {
    detailData: {
      type: Array,
      default: () => []
    },
    totalAmount: {
      type: [String, Number],
      default: 0.00
    },
    isIssueInvoiceModule: { // 开票模块不展示执行类型、内容来源
      type: Boolean,
      default: false
    },
    showMobilePage: {// 移动端
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      orderType,
      contentSource,
      exeType,
      incomeAmountIcon,
      list: {
        items: [],
        page: 1,
        perPage: 10,
        total: 0
      },
      listLoading: true
    };
  },
  watch: {
    detailData: {
      handler(newV) {
        if (newV.length > 0) this.fetchData(true);
      },
      immediate: true
    }
  },
  methods: {
    // 自定义序号
    indexMethod(index) {
      return index + (this.list.page - 1) * this.list.perPage + 1;
    },
    splitData(params, data) {
      const { page, perPage } = params;
      this.list.items = data.splice((page - 1) * perPage, perPage);
    },
    fetchData(reset = false) {
      try {
        if (reset) this.list.page = 1;
        const params = {
          page: this.list.page,
          perPage: this.list.perPage
        };
        const data = JSON.parse(JSON.stringify(this.detailData));
        this.list.total = data.length;
        this.splitData(params, data);
      } catch (error) {
        console.log(error);
      }
    },
    handleSizeChange(val) {
      this.list.perPage = val;
      this.fetchData(true);
    },
    handleCurrentChange(toPage) {
      this.list.page = toPage;
      this.fetchData();
    },
    // 跳转订单详情页
    setRouterName(type) {
      return type === 1 ? 'orderDetail' : type === 2 ? 'projectDetail' : 'projectChildDetail';
    },
    setRouterParams(data) {
      const { orderType, relatedId } = data;
      const key = orderType === 1 ? 'orderId' : 'id';
      return { [key]: relatedId };
    },
    goOrderDetail(data) {
      const name = this.setRouterName(data.orderType);
      const params = this.setRouterParams(data);
      const routeUrl = this.$router.resolve({
        name,
        params
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.table-list {
  margin-bottom: 30px;
}
::v-deep .dynamic-edit-table-cell {
  background: #F9F9F9;
}
</style>
